<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../css/global.css" media="all">
		<link rel="stylesheet" href="../css/table.css" />
	</head>
	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				<div>
					<form class="layui-form" id="searchData" action="">
						<table class="admin-table">
							<tr>
								<td style="width: 70px;text-align: center;">订单状态</td>
								<td id="orderStatus" align="center">
									<div>
										<select name="selectOrderStatus" id="selectOrderStatus" class="layui-input-inline">
											<option value=""></option>
											<option value="已付款">已付款</option>
											<option value="未付款">未付款</option>
										</select>
									</div>
								</td>
								<td style="width: 70px;text-align: center;">是否删除</td>
								<td id="deleteStatus" align="center">
									<div class="layui-input-inline">
										<select name="deleteStatus">
											<option value=""></option>
											<option value="是">是</option>
											<option value="否">否</option>
										</select>
									</div>
								</td>
								<td style="width: 70px;text-align: center;">开始时间</td>
								<td><input class="layui-input" name="startTime" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly="readonly"/></td>
								<td style="width: 70px;text-align: center;">结束时间</td>
								<td><input class="layui-input" name="endTime" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly="readonly"/></td>
							</tr>
						</table>
					</form>
				</div>
				<div style="margin-top: 20px;">
					<a href="javascript:;" class="layui-btn layui-btn-small" id="roleAdd">
						<i class="layui-icon">&#xe608;</i> 添加
					</a>
					<a href="#" class="layui-btn layui-btn-small" id="roleEdit">
						<i class="layui-icon">&#xe642;</i> 修改
					</a>
					<a href="#" class="layui-btn layui-btn-small" id="roleDelete" >
						<i class="layui-icon">&#xe640;</i> 删除
					</a>
					<a href="#" class="layui-btn layui-btn-small" id="roleSearch" >
						<i class="layui-icon">&#xe615;</i> 搜索
					</a>
					<a href="#" class="layui-btn layui-btn-small" id="roleCancal" >
						<i class="layui-icon">&#xe650;</i> 取消
					</a>
				</div>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th sortable="true" field="accountId">账户ID<i class="layui-icon">&#xe625;</i></th>
								<th field="userName" sortable="true">用户名<i class="layui-icon">&#xe625;</i></th>
								<th>用户角色</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.rows, function(index, item){ }}
			<tr>
				<!--<td>标签加class="datagrid-disable"属性，指定该列不能编辑 -->
				<td class="datagrid-disable"><input type="checkbox" lay-skin="primary" name="checkbox"></td>
				<!--<td>标签加class="primary-key"属性，指定该数据为id值 -->
				<td hidden="hidden" class="primary-key">{{ item.accountId }}</td>
				<td>{{ item.accountId }}</td>
				<td>{{ item.userName }}</td>
				<td>{{ item.accountRole }}</td>
				<td class="datagrid-disable">
					<a href="javascript:;" data-id="{{item.accountId}}" data-opt="view" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-id="{{item.accountId}}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-id="{{item.accountId}}" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
					<a href="javascript:;" data-id = "{{item.accountId}}" data-opt="save" class="layui-btn layui-btn-warm layui-btn-mini">保存</a>
				</td>
			</tr>
			{{# }); }}
		</script>
	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script>
			layui.config({
				base: '../extend/'
			});

			layui.use(['datagrid', 'form','laydate'], function() {
				var $ = layui.jquery,
					datagrid = layui.datagrid(),
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form();
				
					
				datagrid.init({
					url: '../datas/userList.json', //地址
					elem: '#content', //内容容器
					params: {//发送到服务端的参数
					},
					type: 'GET',
					tempElem: '#tpl', //模块容器
					sortName:true,//排序(参数可以是排序字段也可以是true)
					sortOrder:"desc",
					/**
					 * 绑定每一行a标签按钮点击事件，需要两个参数
					 * name:data-opt属性的值
					 * opt:响应按钮事件的方法（function）
					 */
					rowBtnClickEvent:[{"name":'view',"opt":viewEvent},{"name":'edit',"opt":editEvent},{"name":'del',"opt":delEvent},{"name":'save',"opt":saveEvent}],
					/*
					 * 行编辑，edit默认为false;传url值则会在编辑完数据后按下回车键后保存整个table的值
					 * url 不需要任何参数
					 */
					rowEditEvent:{"edit":true,"url":"../datas/userSaveARow.json"},
					pageConfig: { //分页参数配置
						elem: '#paged', //分页容器
						pageSize: 1 //分页大小
					},
					success: function() { //渲染成功的回调
						//alert('渲染成功');
					},
					fail: function(msg) { //获取数据失败的回调
						//alert('获取数据失败')
					},
					complate: function() { //完成的回调
						//复选框渲染事件
						form.render('checkbox');
						/*
						 * 全选或反选,使用时需要传递1个参数
						 * 参数：指定某一个复选框，参数形式为：[checkbox(params)]，params是lay-filter属性的值
						 */
						datagrid.render('checkbox(allselector)');
					}//complate结束
				});
				
				//顶部删除按钮事件
				$('#roleDelete').on('click', function() {
					/**
					 * 获取当前选中checkbox行的值
					 */
					var row = datagrid.getCheckedRows();
					if(row.id == null || row.id == ""){
						layer.msg("请选择您要删除的数据！");
					}else{
						layer.confirm('确定删除该项吗?', {icon: 3, title:'提示信息'}, function(index){
						$.ajax({
								url:"../datas/userDeleteResultMsg.json",
								data:row.id,
								async:true,
								success:function(obj){
								layer.msg(obj.msg);
								layer.close(index);
  								location.reload();
								}
						});//ajax结束
					});//layer.confirm结束
					}
				});//顶部删除按钮事件结束
				
				//顶部添加按钮事件
				$('#roleAdd').on('click', function() {
					$('#addNewItem').find('input[type=text]').val("");
					var con = $('#addNewItem');
					layer.open({
							type: 1,
							title: '添加角色',
							content: con,
							anim:6,
							skin:'layer-ext-moon',
							btn: ['确定', '取消'],
							area: ['350px', '250px'],
							yes: function(index, layero) {
								$.ajax({
									url:"../datas/userAddResultMsg.json",
									dataType:'json',
									async:true,
									success: function(obj){
									layer.msg(obj.msg);
									layer.close(index);
								}
							});//ajax结束
							},
							shade :[0.5, '#393D49'],
							maxmin :false
						});
				});//顶部添加按钮事件结束
				
				//顶部编辑按钮事件
				$('#roleEdit').on('click', function() {
					//获取选中行，返回每行的value
					var row = datagrid.getCheckedRows();
					if(row.id == null || row.id == ""){
						layer.msg("请选择您要修改的数据！");
					}else if(row.id.length>1){
						layer.msg("一次只能修改一条数据！");
					}else{
						var con = $('#addNewItem');
						$.ajax({
									dataType:"json",
									url:"../datas/userEdit.json",
									success:function(obj){
										$('#accountId').val(obj.rows[0].accountId);
										$('#userName').val(obj.rows[0].userName);
										$('#accountRole').val(obj.rows[0].accountRole);
											layer.open({
											type: 1,
											title: '修改角色',
											content: con,
											anim:6,
											skin:'layer-ext-moon',
											btn: ['确定', '取消'],
											area: ['350px', '250px'],
											yes: function(index, layero) {
												//这是核心的代码。
												$.ajax({
												url:"../datas/userEditResultMsg.json",
												dataType:'json',
												data:row.id,
												async:true,
												success: function(obj){
													if(obj.success==true){
														layer.msg(obj.msg);
														layer.close(index);
													}else{
														layer.msg(obj.msg);
														layer.close(index);
													}
												}
											});//ajax结束
											},
											shade :[0.5, '#393D49'],
											maxmin :false
										});//layer.open结束
									}
								});//ajax结束
					}
				});//编辑按钮事件的结束
				
				//顶部搜索按钮事件
				$('#roleSearch').on('click', function() {
					var obj = datagrid.serializeObject('#searchData');
					datagrid.load(obj);
				});//搜索按钮事件的结束
				
				//顶部取消按钮事件
				$('#roleCancal').on('click',function(){
					location.reload();
				});
				
						//绑定预览按钮逻辑
						function viewEvent(){
							$.getJSON("../datas/userView.json",function(obj){
								if(obj.success==true){
								$('#accountId').val(obj.rows[0].accountId);
								$('#userName').val(obj.rows[0].userName);
								$('#accountRole').val(obj.rows[0].accountRole);
								$('#addNewItem').find('input[type=text]').attr('readonly','readonly');
								var con = $('#addNewItem');
								layer.open({
										type: 1,
										title: '预览角色信息',
										content: con,
										anim:6,
										skin:'layer-ext-moon',
										area: ['350px', '200px'],
										shade :[0.5, '#393D49'],
										maxmin :false
									});//layer.open结束
								}else{
									layer.msg(obj.msg);
								}
							});
						}
						
						//绑定编辑按钮逻辑
						function editEvent(){
							$.getJSON("../datas/userEdit.json",function(obj){
								if(obj.success==true){
								$('#accountId').val(obj.rows[0].accountId);
								$('#userName').val(obj.rows[0].userName);
								$('#accountRole').val(obj.rows[0].accountRole);
								$('#addNewItem').find('input[type=text]').attr('readonly','readonly');
								var con = $('#addNewItem');
									layer.open({
											type: 1,
											title: '修改角色',
											content: con,
											anim:6,
											skin:'layer-ext-moon',
											btn: ['确定', '取消'],
											area: ['350px', '250px'],
											yes: function(index, layero) {
											//这是核心的代码。
											$.ajax({
												url:"../datas/userEditResultMsg.json",
												dataType:'json',
												async:true,
												success: function(obj){
													if(obj.success==true){
														layer.msg(obj.msg);
														layer.close(index);
													}else{
														layer.msg(obj.msg);
														layer.close(index);
													}
												}
											});//ajax结束
										},
										shade :[0.5, '#393D49'],
										maxmin :false
									});//layer.open结束
								}else{
									layer.msg(obj.msg);
								}
							});
						}//editEvent编辑结束
						
						//绑定删除按钮逻辑
						function delEvent(){
							/*
							 * getRow只在行内适用，将$(this)作为参数
							 * row 可取行的值（行class是可编辑状态列的值）
							 * row.id可取id
							 * row.rowIndex可取行索引
							 */
							var row = datagrid.getRow($(this));//获取id
							alert(row.id);
							for (var i in row) {
								console.log(row[i]);
							}
							layer.confirm('确定删除该项吗?', {icon: 3, title:'提示信息'}, function(index){
								//这里写删除的请求
								$.ajax({
									url:"../datas/userDeleteResultMsg.json",
									data:row.id,
									async:true,
									success:function(obj){
									layer.msg(obj.msg);
									location.reload();
									}
								});//ajax结束
							});//layer.confirm结束
						}//delEvent删除结束
						
						//绑定保存事件
						function saveEvent(){
							var row = datagrid.getRow($(this));
							$.ajax({
								url:"../datas/userSaveARow.json",
								data:row.rowData,
								success:function(obj){
									layer.msg(obj.msg);
								}
							});
						
						}
						
				
			});//layui.use的结束
		</script>
	</body>
	<form class="layui-form" action="" id="roleAddAndEdit">
	<div style="padding:10px;" id="addNewItem" hidden="hidden">
		<input id="accountId" type="text" class="layui-input" lay-verify="required" style="margin-bottom:5px;" name="accountId" placeholder="请填写账户ID" />
		<input id="userName" type="text" class="layui-input" lay-verify="required" style="margin-bottom:5px;" name="userName" placeholder="请填写用户名" />
		<input id="accountRole" type="text" class="layui-input" lay-verify="required" name="accountRole" placeholder="请选择用户角色" />
	</div>
	</form>
</html>
